<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表单验证测试</title>
		<link href="<%=request.getContextPath()%>/jquery-easyui-1.5/themes/bootstrap/easyui.css" rel="stylesheet"/>
		<link href="<%=request.getContextPath()%>/jquery-easyui-1.5/themes/icon.css" rel="stylesheet"/>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/jquery.min.js"></script>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/jquery.easyui.min.js"></script>
		<script src="<%=request.getContextPath()%>/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
		</head>
	<body>
		<div class="easyui-panel" title="表单验证" style="width:50%; padding:30px 30px;">
			<form id="validateForm" method="post">
				<!-- 简单的非空验证 -->
				<div style="margin-bottom:10px">
					<input id="validateName" name="name" autofocus style="width:100%" class="easyui-textbox" data-options="
					label: 'Name:',
					required: true">
				</div>
				<!-- 1.3.2新增的多种类型验证 -->
 				<div style="margin-bottom:10px">
					<input name="email" style="width:100%" class="easyui-textbox" data-options="
					label: 'Email:',
					required: true,
					validType:['email','remote[\'<%=request.getContextPath() %>/TestServlet?command=checkEmail\', \'email\']'],
					invalidMessage: '该邮箱非法或已存在'">
				</div>
				<!-- 自定义验证类型 -->
				<div style="margin-bottom:10px">
					<input name="mobile" style="width:100%" class="easyui-textbox" data-options="
					label: 'Mobile',
					required: true,
					validType: 'mobile'">
				</div>
				<!-- 自定义验证类型 -->
				<div style="margin-bottom:10px">
					<input name="subject" style="width:100%" class="easyui-textbox" data-options="
					label: 'Subject:',
					required: true,
					validType: 'minLength[5]'">
				</div>
				<!-- 多行textbox -->
				<div style="margin-bottom:10px">
					<input name="message" style="width:100%;height:60px" class="easyui-textbox" data-options="
					label: 'Message:',
					multiline: true">
				</div>
				<div style="margin-bottom:10px">
					<select name="language" style="width:100%" class="easyui-combobox" data-options="
					label: 'Area',
					editable: false">
						<option value="ar">Arabic</option>
						<option value="bg">Bulgarian</option>
						<option value="ca">Catalan</option>
						<option value="zh-cht">Chinese Traditional</option>
						<option value="cs">Czech</option>
						<option value="da">Danish</option>
						<option value="nl">Dutch</option>
						<option value="en" selected="selected">English</option>
						<option value="et">Estonian</option>
						<option value="fi">Finnish</option>
						<option value="fr">French</option>
						<option value="de">German</option>
						<option value="el">Greek</option>
						<option value="ht">Haitian Creole</option>
						<option value="he">Hebrew</option>
						<option value="hi">Hindi</option>
						<option value="mww">Hmong Daw</option>
						<option value="hu">Hungarian</option>
					</select>
				</div>
			</form>
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="resetForm()" style="width:80px">Reset</a>
			</div>
		</div>
		<script>
			// 自定义验证，继承$.fn.validatebox.defaults.rules，扩展新的验证类型
			$.extend($.fn.validatebox.defaults.rules, {
			    minLength: {
					validator: function(value, param){
						return value.length >= param[0];
					},
					message: '请至少输入{0}个字符.'
			    },
			    mobile: {
			    	validator: function (value, param) {
						return /^(?:13\d|15\d|18\d)-?\d{5}(\d{3}|\*{3})$/.test(value);
					},
					message: '手机号码格式不正确'
			    },
			});
			
			// textbox的获取焦点添加方式
 			$(function(){
				$("#validateName").textbox('textbox').focus()
			}) 
			
			function submitForm(){
				console.info($('#validateForm').serialize())
				$('#validateForm').form('submit');
			}
			function resetForm(){
				$('#validateForm').form('reset');
			}
		</script>
	</body>
</html>